<template>
<div class="app-container">
    <h2>通用Echarts</h2>
    <el-tabs type="border-card">
      <el-tab-pane label="柱状图">
            <h2>人员图</h2>
      <div style="width:900px; height:600px;">
        <e-charts ref="situationChart" :chart-option="applyOption" />
      </div>
      </el-tab-pane>
      <el-tab-pane label="饼图">

      </el-tab-pane>
      <el-tab-pane label="折线图">角色管理</el-tab-pane>
      <el-tab-pane label="关系图">定时任务补偿</el-tab-pane>
    </el-tabs>

  </div>
</template>
<script>
import ECharts from '@/views/components/ECharts'

export default {
  components: {
    ECharts
  },
  data () {
    return {
      applyOption: {} // 饼图
    }
  },
  created () {
    this.init()
  },
  methods: {
    roundDatas (num) {
      var datas = []
      for (var i = 0; i < num; i++) {
        datas.push({
          name: 'circle' + i
        })
      }
      return datas
    },
    init () {
      this.$nextTick(() => {
        this.applyOption = {
          backgroundColor: '#fff',
          animationDurationUpdate: 1500,
          animationEasingUpdate: 'quinticInOut',
          roam: false, // 鼠标缩放及平移
          series: [
            {
              type: 'graph',
              tooltip: {},
              ribbonType: true,
              layout: 'circular',
              hoverAnimation: false,
              width: '50%',
              height: '50%',
              circular: {
                rotateLabel: true
              },
              symbolSize: 1,
              data: this.roundDatas(1000),
              itemStyle: {
                normal: {
                  label: {
                    show: false
                  },
                  color: '#58446C'
                },
                emphasis: {
                  label: {
                    show: false
                  }
                }
              }
            },
            {
              type: 'graph',
              ribbonType: false,
              hoverAnimation: false,
              layout: 'circular',
              width: '50%',
              height: '50%',
              itemStyle: {
                normal: {
                  label: {
                    rotate: true,
                    show: false
                  }
                },
                emphasis: {
                  label: {
                    show: false
                  }
                }
              },
              data: [
                {
                  // x: 321,
                  // y: 170,
                  name: '1',
                  symbolSize: 10,
                  value: 0,
                  itemStyle: {
                    normal: {
                      color: '#3e6aff'
                    }
                  }
                },
                {
                  // x: 335,
                  // y: 225,
                  name: '2',
                  symbolSize: 10,
                  value: 0,
                  itemStyle: {
                    normal: {
                      color: '#2b81b8'
                    }
                  }
                },
                {
                  // x: 371,
                  // y: 265,
                  name: '3',
                  symbolSize: 10,
                  value: 0,
                  itemStyle: {
                    normal: {
                      color: '#169f85'
                    }
                  }
                },
                {
                  // x: 425,
                  // y: 280,
                  name: '4',
                  symbolSize: 10,
                  value: 0,
                  itemStyle: {
                    normal: {
                      color: '#9bbb56'
                    }
                  }
                },
                {
                  // x: 488,
                  // y: 260,
                  name: '5',
                  symbolSize: 10,
                  value: 0,
                  itemStyle: {
                    normal: {
                      color: '#01cf96'
                    }
                  }
                },
                {
                  // x: 520,
                  // y: 225,
                  name: '6',
                  symbolSize: 10,
                  value: 0,
                  itemStyle: {
                    normal: {
                      color: '#ff8501'
                    }
                  }
                },
                {
                  // x: 533,
                  // y: 175,
                  name: '7',
                  symbolSize: 10,
                  value: 0,
                  itemStyle: {
                    normal: {
                      color: '#fb455e'
                    }
                  }
                },
                {
                  name: '8',
                  symbolSize: 10,
                  value: 0,
                  itemStyle: {
                    normal: {
                      color: '#fa475d'
                    }
                  }
                }
              ]
            }
          ]
        }
      })
    }
  }

}
</script>
<style scoped>

</style>
